<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="鉴定结果"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
          ref="formRef"
        >
          <a-form-item
            label="鉴定结果"
            name="orderState"
            :rules="[{ required: true, message: '鉴定结果' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.orderState"
              placeholder="鉴定结果"
            >
              <a-select-option :value="2">成功</a-select-option>
              <a-select-option :value="3">失败</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="鉴定编号"
            name="orderNo"
            :rules="[{ required: true, message: '鉴定编号不能为空!' }]"
          >
            <a-input
              v-model:value="formData.orderNo"
              placeholder="输入鉴定编号"
            />
          </a-form-item>
          <a-form-item
            label="鉴定报告"
            name="authImg"
            ref="uploadImgRef"
            :rules="[{ required: true, message: '鉴定报告不能为空!' }]"
          >
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.pdf"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formData.authImg"
                  :src="formData.authImg"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.pdf格式</div>
            </div>
          </a-form-item>
          <a-form-item
            v-if="formData.orderState == 3"
            label="失败描述"
            name="reason"
            :rules="[{ required: true, message: '输入鉴定失败具体原因!' }]"
          >
            <a-textarea
              :rows="6"
              v-model:value="formData.reason"
              placeholder="输入鉴定失败具体原因"
              :maxlength="500"
            />
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleReset"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">确认</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref,nextTick } from "vue";
import { singleUploadsFile } from "@/api/upload";
import { inputAppraisalResult } from "@/api/order";
import { message } from "ant-design-vue";
const modalOpen = ref(false);
const formData = ref({
  id: "",
  orderNo: "",
  orderType: 1,
  orderState: 2,
  reason: undefined,
  authImg: undefined,
});
const open = (id, orderType) => {
  nextTick(() => {
    formData.value.id = id;
    formData.value.orderType = orderType;
    modalOpen.value = true;
    uploadImgRef.value.clearValidate();
  })
};
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const loading = ref(false);
const uploadImgRef = ref(null);
const handleChange = (file) => {
  loading.value = true;
  let formState = new FormData();
  formState.append("file", file.file);
  formState.append("type", "1");
  singleUploadsFile(formState).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      formData.value.authImg = res.data;
      uploadImgRef.value.clearValidate();
    }
  });
};
const formRef = ref(null);
const emtis = defineEmits(["refreshList"]);
const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    formData.value.authImg = [formData.value.authImg];
    const data = await inputAppraisalResult(formData.value);
    if (data.code == 200) {
      message.info("成功");
      modalOpen.value = false;
      emtis("refreshList");
    }
  });
};
const handleReset = () => {
  formData.value = {
    id: "",
    orderNo: "",
    orderType: 1,
    orderState: 2,
    reason: undefined,
    authImg: undefined,
  };
  
};
defineExpose({ modalOpen, open });
</script>
<style lang="less"></style>
